<template>
  <transition name="slide">
    <div class="list">
      <van-nav-bar title="西电学术" leftText="返回" rightText="1" leftArrow @click-left="onClickLeft" @click-right="onClickRight" />
      <!-- <div class="scroll-wrapper" :ref="scroll-wrapper">
        <cube-scroll ref="scroll" :data="items" :options="options" @pulling-up="onPullingUp" @pulling-down="onPullingDown"></cube-scroll>
      </div> -->
      <ul class="itemWrap">
        <h2>西电学术报告时间表</h2>
        <!-- <li class="item">
          <div class="Limg">
            <img src="../../assets/img/apple.png" alt="">
          </div>
          <div class="Rmsg">
            <h3 class="title">论道终南读书会第56期：百济王的爵号</h3>
            <p class="reporter">主讲人：冯立君 博士</p>
            <p class="time">讲座时间：2018-05-09 16:20:00</p>
            <p class="place">地点：西电南校区信远楼2区人文学院</p>
          </div>
        </li> -->
        <li class="item" v-for="(item,index) in academicList" :key="index" @click="goAcademicArticle(index)">
          <div class="Limg">
            <img v-if="item.reporterpic" :src="'http://meeting.xidian.edu.cn/uploads/images/'+item.reporterpic" alt="">
            <img v-if="!item.reporterpic" src="../../assets/img/xidian.jpg" alt="">
          </div>
          <div class="Rmsg">
            <h3 class="title">{{ item.title }}</h3>
            <p class="speechmaker">主讲人：{{ item.reporter }}</p>
            <p class="time">讲座时间：{{ item.time }}</p>
            <p class="place">地点：{{ item.place }}</p>
          </div>
        </li>
      </ul>
      <!-- <router-view></router-view> -->
    </div>
  </transition>
</template>

<script>
import store from "../../common/store";
export default {
  data (){
    return {
      academicList:[]
    }
  },
  computed:{

  },
  methods:{
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.push('/list/mint-pull')
    },
    goAcademicArticle (index){
      this.$router.push({ path: '/index/academicDetail/academicArticle', query: { articleId: this.academicList[index].id } })
    }
  },
  created (){
    this.$apis.getAcademicList("",store.state.accesskey).then(res => {
      this.academicList = res.msg
      console.log(res.msg);
    });
  }
}
</script>

<style lang="less" scoped >
@import  "../../assets/less/baseDetail.less";
.item{
  width: 100%;
  height: 130px;
  margin: 0 auto;
  border-bottom: 1px solid #eee;
}
.item .Limg{
  float: left;
  width: 25%;
  height: 130px;
}
.item .Limg img{
  display: block;
  width: 85%;
  margin: 10% 0 6% 12%;
 
}
.item .Rmsg{
  float: left;
  width: 66%;
  height: 80px;
  margin-left: 3%;
  line-height: 25px;
  margin-top: 10px; 
  font-size: 14px;
 
}
.item .Rmsg p,.item .Rmsg h3{
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item .Rmsg .title{
  color: rgb(18, 145, 248);
}
.itemWrap{
  height: calc(~'100% - 46px');
  overflow: scroll;
}
.itemWrap h2{
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  margin: 5px auto;
  border-bottom: 1px solid #eee;
}
</style>
